<template>
  <el-dialog
    title="订单详情"
    :visible.sync="isShow"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="80%"
  >
    <div class="dialog_wrap">
      <div class="title">订单信息</div>
      <div class="wrap">
        <div class="item">
          <span class="key">订单编号：</span>
          <span class="value">{{ detail.orderId }}</span>
        </div>
        <div class="item">
          <span class="key">订单状态：</span>
          <span v-if="detail.payStatus == 0">未支付</span>
          <span v-else-if="detail.payStatus == 1">超时未支付</span>
          <span v-else-if="detail.payStatus == 2">已取消</span>
          <span v-else-if="detail.payStatus == 3">已支付</span>
          <span v-else-if="detail.payStatus == 4">退款中</span>
          <span v-else>已退款</span>
        </div>
        <div class="item">
          <span class="key">下单渠道：</span>
          <span class="value">{{ detail.channelType == '01' ? '小程序端' : '场馆端' }}</span>
        </div>
        <div class="item">
          <span class="key">订单金额：</span>
          <span class="value">{{ detail.allPrice }}</span>
        </div>
        <div class="item">
          <span class="key">实付金额：</span>
          <span class="value">{{ detail.realPrice }}</span>
        </div>
        <div class="item">
          <span class="key">优惠金额：</span>
          <span class="value">{{ detail.yhMoney }}</span>
        </div>
        <div class="item">
          <span class="key">支付方式：</span>
          <span class="value">{{ detail.payMethod }}</span>
        </div>
        <div class="item">
          <span class="key">下单时间：</span>
          <span class="value">{{ detail.createTime }}</span>
        </div>
        <div class="item">
          <span class="key">支付时间：</span>
          <span class="value">{{ detail.payTime }}</span>
        </div>
        <div class="item">
          <span class="key">手机号：</span>
          <span class="value">{{ detail.memberPhone }}</span>
        </div>
        <div class="item">
          <span class="key">会员姓名：</span>
          <span class="value">{{ detail.memberName }}</span>
        </div>

        <div class="item">
          <span class="key">餐区：</span>
          <span class="value">{{ detail.areaName }}</span>
        </div>
        <div class="item">
          <span class="key">餐桌：</span>
          <span class="value">{{ detail.tableName }}</span>
        </div>
      </div>
      <div class="wrap mb10">
        <span class="key">备注：</span>
        <span class="value">{{ detail.note }}</span>
      </div>
      <div class="wrap">
        <div class="item">
          <span class="key">退款时间：</span>
          <span class="value">{{ detail.refoundTime }}</span>
        </div>
        <div class="item">
          <span class="key">退款金额：</span>
          <span class="value">{{ detail.refoundMoney }}</span>
        </div>
      </div>
      <div class="title">商品信息</div>
      <el-table
        :data="detail.detailList"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column
          align="center"
          label="商品名称"
          prop="goodsName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="商品分类"
          prop="categoryName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="条形码"
          prop="barCode"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="规格"
          prop="goodsSkuInfo"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="数量"
          prop="num"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="销售价(元)"
          prop="price"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="小计(元)"
          prop="amount"
          min-width="120"
          show-overflow-tooltip
        />
      </el-table>
      <div class="mt30" />
    </div>

  </el-dialog>
</template>

<script>
import store from '@/store'

import { goodsOrderDetail } from '@/api'
export default {
  data() {
    return {
      isShow: false,
      detail: {},
      modalDialog: store.getters.dialog
    }
  },
  methods: {
    getOrderDetail(id) {
      goodsOrderDetail({ param: { id }}).then(res => {
        this.detail = { ...res.record }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .dialog_wrap{
    .title{
      font-size: 16px;
      font-weight: 800;
      margin: 20px 0px;
    }
    .wrap{
      display: flex;
      flex-wrap: wrap;
      .item{
        width: 33.33%;
        margin-bottom: 10px;
      }
    }
  }
</style>
